<template>
  <div>
    <el-form @submit.native.prevent class="query-table-form" :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="担保客户查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="客户类型"
          clearable
          @change="getData()"
          v-model="params.org_class"
          :options="enumCustomerType"
        ></c-select>
      </el-form-item>
      <el-form-item v-if="isCity">
        <select-address
          v-model="params.address_code"
          auto-top
          :bottom-level="2"
          placeholder="地址查询"
          clearable
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <select-date-cascader
          placeholder="放款时间"
          class="form-control-ml"
          v-model="queryDate"
          @select="handleDateQuery"
        ></select-date-cascader>
      </el-form-item>
      <el-form-item>
        <c-select
          :options="enumDatumStatus"
          clearable
          @change="getData()"
          placeholder="资料状态"
          v-model="params['datum_status.eq']"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <select-child-bank
          @change="getData()"
          clearable
          v-model="params['bank_id.eq']"
          placeholder="导入银行"
        ></select-child-bank>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-download"
          :loading="exportLoading"
          @click="exportExcel('十二大产业贷')"
        >
          导出
        </el-button>
      </el-form-item>
      <el-form-item>
        <div class="flex-2 d-flex align-items-center">
          <ul class="list-inline flex-1">
            <li class="list-inline-item">
              <el-button type="text" class="col-md-4 col-sm-12" @click="handleCopy(customerUrl)">
                <i class="fa fa-link"></i>
                签约链接
              </el-button>
            </li>
            <li class="list-inline-item">
              <el-popover placement="top-start" title="客户签约地址" trigger="hover">
                <div>
                  <qr-code :value="customerUrl" :size="140"></qr-code>
                </div>
                <el-button slot="reference" class="col-md-4 col-sm-12" type="text">
                  <i class="fa fa-qrcode"></i>
                  签约二维码
                </el-button>
              </el-popover>
            </li>
          </ul>
        </div>
      </el-form-item>
    </el-form>

    <c-table
      border
      v-loading="loading"
      ref="table"
      class="table-sm"
      :columns="tableColumns"
      @sort-change="handleSortChange"
      :data="tableData"
    >
      <template v-slot:use="scope">
        <div class="text-truncate" :title="scope.row.funds_use_dir">
          {{ scope.row.funds_use_dir }}
        </div>
      </template>
      <template v-slot:status="scope">
        <div class="status-label" :class="`badge-${scope.row.statusStyle}`">
          {{ scope.row.statusLabel }}
        </div>
      </template>

      <template v-slot:attach="scope">
        <div class="status-label" :class="`badge-${scope.row.attachStatusStyle}`">
          {{ scope.row.attachStatus }}
        </div>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <project-new-dialog
      :visible.sync="applyVisible"
      :table-id="tableId"
      :form-data="applyRow"
      @success="handleSuccess"
    ></project-new-dialog>

    <project-view-dialog
      :visible.sync="visible"
      :batch-no="attachNo"
      :query-id="queryId"
    ></project-view-dialog>

    <attach-dialog
      :visible.sync="attachVisible"
      @success="handleSuccess"
      :query-id="attachProjectData.customer_related_id"
    ></attach-dialog>
  </div>
</template>
<script>
import {
  baseTableColumns,
  dataAdapter,
  enumCustomerType,
  enumReviewApproval,
  enumReviewStyle,
  parseCascaderDate,
  enumReplaceStatus,
  enumReplaceStatusStyle,
  // enumReviewApprovalSelect,
} from '@/bank/views/limit/index'

import ProjectViewDialog from '@/bank/views/business/limit/history/ProjectViewDialog'
import hndTableMixin from '@/bank/views/business/limit/history/mixins'
import SelectAddress from '@/components/select/SelectAddress'
import ProjectNewDialog from '@/bank/views/limit/ProjectNewDialog'
import AttachDialog from '@/bank/views/business/limit/history/attach/AttachDialog'
import SelectDateCascader from '@/components/select/SelectDateCascader'
import SelectChildBank from '@/bank/components/select/SelectChildBank'
import { copyText } from '@vimi/utils-tool'
export default {
  components: {
    ProjectViewDialog,
    SelectAddress,
    ProjectNewDialog,
    AttachDialog,
    SelectDateCascader,
    SelectChildBank,
  },
  mixins: [hndTableMixin],
  props: {},
  data() {
    return {
      enumCustomerType,
      // enumReviewApprovalSelect,
      enumDatumStatus: {
        1: '已完善',
        0: '待完善',
      },
      params: {
        index: 1,
        size: 10,
        'import_status.eq': 1,
        'channel_type.eq': 0,
        'review_approval.neq': 3,
        customer_name: '',
        'is_rural_dev.eq': 0,
      },
      queryDate: [],
      order: {
        create_time: 'desc',
      },
      tableName: 'datum_one_county_industry_confirm',
      tableColumns: [
        ...baseTableColumns,
        {
          attrs: {
            label: '项目状态',
            prop: 'statusLabel',
            align: 'center',
            width: '110px',
          },
          render: (h, { row }) =>
            h('div', { style: { lineHeight: 1.2 } }, [
              h('div', { class: `text-${row.statusStyle}` }, row.statusLabel),
              h('small', { class: `text-${row.replaceStatusStyle}` }, row.replaceStatus),
            ]),
        },
        {
          attrs: {
            label: '资料状态',
            prop: 'attachStatus',
            align: 'center',
            width: '110px',
            sortable: 'datum_status',
          },
          slot: 'attach',
        },
        {
          attrs: { label: '操作', align: 'center', width: '160px' },
          operations: [
            {
              content: '资料补充',
              icon: 'fa fa-clipboard',
              event: this.handleUpload,
              ifRender: row => row.bank_user_id === this.userId || this.user.job === 'org_corp',
            },
            // { content: '修改', icon: 'fa fa-edit', event: this.handleToEdit, ifRender: row => +row.review_approval === 0 && row.bank_id === this.clientId },
            { content: '查看', icon: 'fa fa-search', event: this.showCreditFile },
          ],
        },
      ],

      queryId: '',
      attachNo: '',
      visible: false,

      // 编辑
      applyVisible: false,
      applyRow: {},
      tableId: '',

      attachProjectData: {},
      attachVisible: false,
    }
  },
  computed: {
    isCity() {
      return +this.user.orgRegionLever < 3
    },
    bankName() {
      return this.org.orgName || '-'
    },
    bankCode() {
      return this.org.orgCode
    },
    bankType() {
      return this.user.clientOrgClassType
    },
    productId() {
      return this.$route.query.id
    },
    customerUrl() {
      return window.location.origin + '/credit-h5/#/'
    },
  },
  watch: {},
  created() {
    // this.params['submit_person.eq'] = this.userId
    if (this.productId) {
      this.params['project_type_id.eq'] = this.productId
    }
    this.getData()
  },
  mounted() {},
  methods: {
    handleCopy(value) {
      const success = copyText(value)
      if (success) {
        this.$message.success('已复制到粘贴板')
      } else {
        this.$message.error('已复制到粘贴失败')
      }
    },
    // getParams() {
    //   return this.params
    // },
    handleSuccess() {
      this.getData()
      this.$store.dispatch('getTaskCountLimit', { type: 0, id: this.productId })
    },
    handleSortChange({ order, column }) {
      if (!order) {
        this.order = { create_time: 'desc' }
      } else {
        this.order = {}
        this.order[column.sortable] = order.includes('asc') ? 'asc' : 'desc'
      }
      this.getData()
    },
    handleUpload(row = {}) {
      this.attachProjectData = row
      this.attachVisible = true
    },
    dataAdapter(item) {
      dataAdapter(item)
      item.statusLabel = enumReviewApproval[item.review_approval]
      item.statusStyle = enumReviewStyle[item.review_approval]
      item.replaceStatus = enumReplaceStatus[item.is_replace] || ''
      item.replaceStatusStyle = enumReplaceStatusStyle[item.is_replace]
      item.attachStatus = this.enumDatumStatus[item.datum_status]
      item.attachStatusStyle = +item.datum_status === 1 ? 'success' : 'danger'
      return item
    },
    handleDateQuery(val) {
      const [start, end] = parseCascaderDate(val)
      this.params['create_time.gte'] = start
      this.params['create_time.lte'] = end
      this.getData()
    },
    showCreditFile(row = {}) {
      this.queryId = row.customer_related_id
      this.attachNo = row.project_approval_batch_bank_id || ''
      this.visible = true
    },
    handleToEdit(row = {}) {
      this.applyRow = { ...row }
      this.tableId = this.applyRow['customer_related_id'] || ''
      this.applyVisible = true
    },
  },
}
</script>
<style lang="scss" scoped>
.status-label {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s;
}
</style>
